<%@ page pageEncoding="UTF-8" %>

<div style="width: 360px; margin-top: 20px; text-align: center">
    <div style="width: 360px;text-align: center;">
        任务设置：<select id="type" style="width: 130px"></select>
    </div>

    <div style="width: 360px; margin-top: 8px; text-align: center;">
        <textarea id="textarea" style="width: 360px; height: 150px; border-radius: 5px; font-size: 16px;"></textarea>
    </div>

    <button id="save" style="width: 60px; height: 30px; margin-top: 20px;">保存</button>
</div>

<script>
    getTaskType();
    showSql();
    $("#save").click(function() {save();});
    $("#type").bind("input porpertychange", function() {showSql();});

    // 保存sql任务配置
    function save() {
        let param = {};
        param["value"] = $("#type").val();
        param["sql"] = $("#textarea").val();

        console.log(param);

        const result = ajaxMethod("saveTask", param);

        if (result.code == 0) {
            alert("保存成功");
        }
    }

    // 展示sql任务
    function showSql() {
        const result = ajaxMethod("showSql",{
            value: $("#type").val()
        });

        if (result.code == 0) {
            $("#textarea").val(result.data.sql);
        }
    }

    // 可选任务类别
    function getTaskType() {
        let result = ajaxMethod("taskType");

        if (result.code == 0) {
            let options;
            $.each(result.data, function (index, item) {
                // 注意不要忘记引号
                options += "<option value='"+item.value+"'>"+item.desc+"</option>";
            });
            $("#type").append(options);
        }
    }
</script>